<template>
  <div v-if="model">
    <navbar></navbar>
    <div class="detailinfo">
      <div class="video">
        <video controls="controls" :src="model.content" @error="videoError(model)"></video>
      </div>
      <div class="infotext">
        <div>
          <span>{{model.category.title}}</span>
          <span>{{model.name}}</span>
        </div>


        <div>
          <span>{{model.userinfo.name}}</span>
          <span>146次播放</span>
          <span>10弹幕</span>
          <span>{{model.date}}</span>
        </div>

        <div>
          <p>
            <span class="iconfont iconshoucang" @click="collectionclick" :class="{activecolor: collectionactive}"></span>
            <span>收藏</span>
          </p>

          <p>
            <span class="iconfont iconhuancun"  @click="substricpclick" :class="{substricpcolor: subactive}"></span>
            <span>关注</span>
          </p>

          <p>
            <span class="iconfont iconfenxiang"></span>
            <span>分享</span>
          </p>
        </div>

      </div>
      <div class="detailparent">
        <cover class="detailitem" v-for="(item,index) in commendlist" :key="index" :detailitem="item" />
      </div>

      <commentTitle :datalength="lens" @postcomment="postsuccess" ref="commentIpt"></commentTitle>
      <comment  @publishClick="PostChildcomment" ref="comment"  @lengthselect="len => lens=len" ></comment>
    </div>
  </div>
</template>

<script>
import Navbar from "../components/common/Navbar";
import cover from "./cover";
import commentTitle from "../components/article/commentTitle";
import Comment from "../components/article/comment";
export default {
name: "Article",
  components: {Comment, Navbar,cover,commentTitle},
  data(){
  return{
    model:null,
    commendlist: null,
    myuser:null,
    lens:null,
    Postcomment:{
      comment_content: '',
      comment_date: '',
      parent_id:null,
      article_id:null
    },
    collectionactive:null,
    subactive:null
  }
  },
  methods:{
    videoError(model){
        model.content= require('@/assets/panda.mp4');
      },
    //获取文章数据
   async articleitemData(){
      const res = await this.$http.get('/article/'+ this.$route.params.id)
      this.model = res.data[0]
     if(this.model){
       this.getsubstricp()
     }
    },
    //获取推荐视频数据
    async commendData(){
      const res = await this.$http.get('/commend')
      this.commendlist=res.data
    },
    //发送评论数据
    async postsuccess(res){
      const date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() +1
      let d = date.getDate()
      if(m<10){
        m = '0' + m
      }
      if(d<10){
        d = '0' + d
      }
      let str = y + '-' + m + '-' + d
      this.Postcomment.comment_content=res
      this.Postcomment.comment_date =str
      this.Postcomment.article_id = this.$route.params.id
      const success = await this.$http.post('/comment_post/'+ localStorage.getItem('id'),this.Postcomment)
      this.$refs.comment.commentData()
      this.Postcomment.parent_id = ''
      if(success.status==200){
        this.$msg.fail("评论发表成功")
      }
    },
    //子评论
    PostChildcomment(id){
      this.Postcomment.parent_id = id
      this.$refs.commentIpt.focusinput()
    },
    //收藏
    async collectionclick() {
      if (localStorage.getItem('token')) {
        const res = await this.$http.post('/collection/' + localStorage.getItem('id'),
          {article_id: this.$route.params.id})
        if(res.data.msg=="收藏成功")
        {
          this.collectionactive = true
        }else {
          this.collectionactive = false
        }
        this.$msg.fail(res.data.msg)
      }
    },
    //获取收藏数据
    async getcollection(){
      if(localStorage.getItem('token')) {
        const res = await this.$http.get('/collection/'+localStorage.getItem('id'),
          {params:{
                article_id:this.$route.params.id
            }})
        this.collectionactive = res.data.success
      }
    },
    //关注
    async substricpclick() {
      if (localStorage.getItem('token')) {
        const res = await this.$http.post('/sub_scription/' + localStorage.getItem('id'),
          {sub_id:this.model.userid})
        if(res.data.msg=="关注成功")
        {
          this.subactive = true
        }else {
          this.subactive = false
        }
        this.$msg.fail(res.data.msg)
      }
    },
    //获取关注数据
    async getsubstricp(){
      if(localStorage.getItem('token')) {
        const res = await this.$http.get('/sub_scription/'+localStorage.getItem('id'),
          {params:{
              sub_id:this.model.userid
            }})
        this.subactive = res.data.success
      }
    }
  },
  created() {
    this.articleitemData()
    this.commendData()
    this.getcollection()
  },
  watch:{
    $route(){
      this.articleitemData()
      this.commendData()
      this.getcollection()
      this.$refs.comment.commentData()
    }
  }
}
</script>

<style scoped lang="less">
.detailinfo{
  background-color: white;
  .video{
    width: 100%;
    height: 55.56vw;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.infotext{
  padding: 4.17vw;
  div:nth-child(1){
    span{
      font-size: 4.72vw;
    }
    span:nth-child(1){
      padding: 0 2.78vw;
      color: #fb7299;
      background-color: #f4f4f4;
      border-radius: 2.78vw;
    }
  }
  div:nth-child(2){
    padding: 2.78vw 2.78vw;
    span{
      color: #aaa;
      font-size: 3.61vw;
      padding-right: 1.39vw;
    }
    span:nth-child(1){
      color: black;
      font-size: 4.17vw;
      padding-right: 2.78vw;
    }
  }

  div:nth-child(3){
    padding: 0 2.78vw;
    display: flex;
    p{
      padding-right: 4.44vw;
      color: #757575;
      align-items: center;
      span:nth-child(1){
        font-size: 4.44vw;
      }
      span:nth-child(2){
        font-size: 3.61vw;
      }
      .activecolor{
        color: #fb7299;
      }
      .substricpcolor{
        color: #fb7299;
      }
    }
  }
}
.detailparent{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .detailitem{
    margin: 5px 0;
    width: 40%;
  }
}
</style>
